<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>

<script src="../js/Vue/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/Axios/axios-0.18.0.js"></script>


<div id="app" >



    </el-form>


    <el-container>
        <el-header style="">

            <el-form :inline="true" :model="formInline" style="align-items: center" class="demo-form-inline">
                <el-form-item label="商品的 id :">
                    <el-input v-model="formInline.id" placeholder="请输入商品的 id (请输入数字)"></el-input>
                </el-form-item>
                <el-form-item label="状态:">
                    <el-select v-model="formInline.status" placeholder="请选择要查找的状态">
                        <el-option label="全部" value="4"></el-option>
                        <el-option label="正常" value="1"></el-option>
                        <el-option label="已取消" value="0"></el-option>
                        <el-option label="已完成" value="2"></el-option>
                        <el-option label="已过期" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

        </el-header>
        <el-main >


            <template>
                <el-table
                        :data="orders"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="waresId"
                            label="商品的 id"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="idNumber"
                            label="使用者的身份证号码"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="updateTime"
                            label="最近更新时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="useTime"
                            label="使用时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="180">
                        <template slot-scope="scope">
                            <span style="margin-right: 10px;">
                                {{ scope.row.status == '0' ? '已取消' : '' }}
                                {{ scope.row.status == '1' ? '正常' : '' }}
                                {{ scope.row.status == '2' ? '已完成' : '' }}
                                {{ scope.row.status == '3' ? '已过期' : '' }}
                            </span>
                        </template>

                    </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">

                            <el-button type="primary" v-if="scope.row.status == 1" @click="cancelOrder(scope.row)">取消订单</el-button>
                            </template>

                        </el-table-column>
                </el-table>
            </template>






        </el-main>
    </el-container>







</div>



<script>
  new Vue({

    el:"#app",

    data() {
      return {
          formInline: {
              id: '',
              status: '4'
          },

          orders: [{
              id: '2016-05-02',                         // 订单的主键 id
              idNumber: '440923200804148745',           // 该订单使用者的身份证号码
              waresId: '158582283090817022',          // 商品id
              status: '1',                           //订单状态 0已取消 1 正常 2已完成
              userPhone: '13112345678',              // 下单用户的手机号码
              createTime: '2021-05-06 17:20:07',                  //创建时间
              updateTime: '2021-05-06 17:20:07',                   //修改时间
              useTime: '2021-05-06'                        //使用时间
          }]

        }
    },



    methods: {

        // 表单的提交事件，查询的功能
        onSubmit() {
            console.log('submit!');

            alert(this.formInline.id + "     " + this.formInline.status)

            if (this.formInline.id == ""){
                this.formInline.id = -1
            }



            var _this = this;
            axios({
                method:"get",
                url: "/user/getOrders?" +
                    "id=" + this.formInline.id +
                    "&status=" + this.formInline.status
            }).then(function (resp){

                if (resp.data.code == 1){
                    alert("resp 的数据是:   " + JSON.stringify(resp.data))
                    _this.orders = resp.data.data;
/*                    this.$message({
                        type: 'success',
                        message: '查询成功'
                    });*/
                } else {
                    this.$message({
                        showClose: true,
                        message: '查询失败,',
                        type: 'error'
                    });

                }
            });



        },
        /* 取消订单 */
        cancelOrder(row){

            let id1 = row.id + "";
            let _this = this;
            axios({
                method:"put",
                url: "/user/updateOrders",
                data: {"id":id1, "status":0}
            }).then(function (resp){

                alert(JSON.stringify(resp.data.msg))
                _this.onSubmit()
            })


        },

        // 表格的
        tableRowClassName({row, rowIndex}) {

            if ((rowIndex % 2) === 1) {
                return 'warning-row';
            } else if ((rowIndex%2) === 0) {
                return 'success-row';
            }

            return '';
        }


    },


      /* 初始化数据day， */
      created() {
          // var day = new Date();
          // this.formInline.day = day.getFullYear()+'-' + (day.getMonth() + 1)+"-"+ day.getDate();
          this.onSubmit();
          // alert("当前时间为1： " + day.getFullYear()+'--' + (day.getMonth() + 1)+"--"+ day.getDate())
          // alert("当前时间 this.formInline.day 为： " + this.formInline.day)

      }














  })

</script>



</body>
</html>